<template>
  <div class="body">
    <el-card>
      <div class="title">用户管理</div>
      <el-form :inline="true" :model="formData">
        <el-form-item label="用户账号:">
          <el-input size="mini" v-model="formData.username" placeholder="请输入用户账号"></el-input>
        </el-form-item>
        <el-form-item label="用户名称:">
          <el-input size="mini" v-model="formData.name" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item label="用户性别:">
          <el-select size="mini" v-model="formData.sex" placeholder="请选择用户性别" clearable>
            <el-option v-for="(item, index) in options" :key="index" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户地址:">
          <el-input size="mini" v-model="formData.address" placeholder="请输入用户地址"></el-input>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button size="mini" type="primary" @click="getCompanyTechnology">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" align="center" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="avatar" align="center" label="头像" min-width="15%">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px; border-radius: 50%" :src="scope.row.avatar"
              :preview-src-list="[`${scope.row.avatar}`]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="username" align="center" label="账号" min-width="30%">
        </el-table-column>
        <el-table-column prop="name" align="center" label="用户名称" min-width="20%">
        </el-table-column>
        <el-table-column prop="sex" align="center" label="性别" min-width="15%">
        </el-table-column>
        <el-table-column prop="address" align="center" show-overflow-tooltip label="用户地址" min-width="30%">
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="25%">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.status == 2" @click="edit(scope.row)" type="text"
              size="small">编辑</el-button>
            <el-button :disabled="scope.row.status == 3" @click="rePassword(scope.row)" type="text"
              size="small">重置密码</el-button>
            <!-- <el-button type="text" size="small">编辑</el-button> -->
            <el-button @click="deleteApp(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 20px" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange.bind('11',this)" :current-page="currentPage.page" :page-sizes="[5, 10, 15, 20]"
        :page-size="currentPage.pageSize" layout="total,->, sizes, prev, pager, next, jumper"
        :total="currentPage.total">
      </el-pagination>
    </el-card>
    <editDialog ref="editDialog" @update="update"></editDialog>
    <el-dialog title="重置密码" :visible.sync="isShow">
      密码
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyTechnology, approveCompanyTechnology, delCompanyTechnology } from "../../api/table";
import { getNormalUser, delNormalUser } from '../../api/nested'
import editDialog from './components/editDialog.vue'
export default {
  data() {
    return {
      isShow: false,
      formData: {
        username: "",
        name: "",
        sex: "",
        address: ''
      },
      options: [
        {
          label: "男",
          value: '男',
        },
        {
          label: "女",
          value: '女',
        },
      ],
      currentPage: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: []
    };
  },
  components: { editDialog },
  mounted() {
    this.getCompanyTechnology()
  },
  methods: {
    async getCompanyTechnology() {
      const data = {
        username: this.formData.username,
        name: this.formData.name,
        sex: this.formData.sex,
        address: this.formData.address,
        page: this.currentPage.page,
        pageSize: this.currentPage.pageSize,
      };
      const res = await getNormalUser(data);
      if (res.status != 0) {
        this.$message.error(res.message);
        return
      }
      this.tableData = res.data.data
      this.currentPage.total = res.data.total
    },

    edit(row) {
      console.log(row);
      let rowData = JSON.parse(JSON.stringify(row))

      this.$refs.editDialog.open(rowData)
    },
    rePassword(row) {
      console.log(row);

      this.$confirm('确定重置密码吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.isShow = true
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消重置密码'
        });
      });
    },
    deleteApp(row) {
      console.log(row);

      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {
          id: row.id,
        }
        const res = await delNormalUser(data)
        if (res.status != 0) {
          this.$message.error(res.message);
          return
        }
        console.log(this.tableData);
        if (this.tableData.length == 1) {
          console.log(this.currentPage.page);

          this.currentPage.page = this.currentPage.page - 1
        }
        setTimeout(() => {
          this.getCompanyTechnology()
        }, 500)
        // this.getCompanyTechnology()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage.pageSize = val
      this.getCompanyTechnology()
    },
    handleCurrentChange(data,val) {
      console.log(data);
      
      console.log(`当前页: ${val}`);
      this.currentPage.page = val
      this.getCompanyTechnology()
    },
    update(data) {
      this.getCompanyTechnology()
    }
  },
};
</script>

<style lang="scss" scoped>
.body {
  padding: 20px;
  // height: 100vh;
  background: #f5f7fa;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 20px;
  }
}
</style>
